<!DOCTYPE html>
<html>
<head>
    <title>个人实名综合申请</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-base64@3.6.0/base64.min.js"></script>
    <meta charset="utf-8">

</head>
<body>
<div class="container">
    <div class="form-container">
        <h2>个人实名综合申请 <a href="./companyBasic.html" >企业实名综合申请</a></h2>

        <label for="request-url">请求地址：</label>
        <select id="environment">
            <option selected>天威云预演环境</option>
            <option>天威云生产环境</option>
        </select>
        <input type="text" id="request-url" disabled="disabled"
               value="https://demo-open.itruscloud.com/apigate/authapi/person/authIden">
        <pre></pre>


        <label for="request-url">选择产品：</label>
        <select id="product">
            <option value="idc0001" selected>身份证简项认证（idc0001）</option>
            <!-- <option value="idc0003">身份证人像核验</option> -->
            <option value="idc0004">银行卡三要素认证（idc0004）</option>
            <option value="idc0006">银行卡四要素认证（idc0006）</option>
            <option value="idc0012">手机号三要素验证（idc0012）</option>

            <!-- <option value="idc1004">身份证 OCR</option>
            <option value="idc1005">银行卡 OCR</option>
            <option value="idc2001">H5数读活体人脸验证</option>
            <option value="idc2003">H5眨眼活体人脸验证</option> -->
        </select>
        <pre></pre>


        <table id="data-container" style="width: 70%;">
            <label for="request-url">业务数据：</label>
            <pre></pre>
            <div id="basic">
                <tr>
                    <td style="width: 20%;">APP_ID：</td>
                    <td>
                        <input type="text" id="app-id" value="">
                    </td>
                </tr>
                <tr>
                    <td>SECRET_KEY：</td>
                    <td>
                        <input type="text" id="secret-key" value="">
                    </td>
                </tr>
            </div>

            <tr>
                <td style="width: 15%;">姓名：</td>
                <td>
                    <input type="text" id="user-name" name="name" value="">
                </td>
            </tr>
            <tr>
                <td>身份证号：</td>
                <td>
                    <input type="text" id="user-idcard" name="idCard" value="">
                </td>
            </tr>

            <tr id="bank">
                <td>银行卡号：</td>
                <td>
                    <input type="text" id="user-bankcard" name="bankcard" value="">
                </td>
            </tr>

            <tr id="phone">
                <td>手机号：</td>
                <td>
                    <input type="text" id="user-phone" name="mobile" value="">
                </td>
            </tr>

            <tr id="ocr">
                <td>选择文件：</td>
                <td>
                    <input type="file" id="ocr" accept="image/*">
                    <input type="text" id="fileBase64" name="selfImg">
                </td>
            </tr>
        </table>

        <input for="request-data" id="create-request-data" type="submit" value="生成请求数据">
        <pre></pre>
        <pre></pre>
        请求体:<textarea id="request-data" rows="2" cols="40" disabled="disabled"> </textarea>
        签名值:<span style="color: gray;"> 使用 secretKey + serviceCode 作为秘钥，对 JSON 请求体进行 HMAC-SHA1 哈希计算</span><textarea id="request-signature" rows="1" cols="40" disabled="disabled"> </textarea>
        <pre></pre>

        请求 curl 命令：<textarea id="request-curl" rows="8" cols="40" disabled="disabled"> </textarea>


    </div>
</div>

<script>
    $(function () {
        // 设置请求地址
        $('#environment').on('change', (e) => {
            let select = $('#environment option:selected').text();
            $("#request-url").val("https://demo-open.itruscloud.com/apigate/authapi/person/authIden");
            if (select == "天威云生产环境") {
                $("#request-url").val("https://open.itruscloud.com/apigate/authapi/person/authIden");
            }
        });


        $("#bank").hide();
        $("#phone").hide();
        $("#ocr").hide();

        $('#product').on('change', (e) => {
            let select = $('#product option:selected').val();

            $("#bank").hide();
            $("#phone").hide();
            $("#ocr").hide();

            if (select == "idc0001") {

            } else if (select == "idc0003") {
                $("#ocr").show();
            } else if (select == "idc0004") {
                $("#bank").show();
            } else if (select == "idc0006") {
                $("#bank").show();
                $("#phone").show();
            } else if (select == "idc0012") {
                $("#phone").show();
            }
        });


        $('#ocr').on('change', function (event) {
            var file = event.target.files[0];
            var reader = new FileReader();

            reader.onload = function (e) {
                var fileContent = Base64.encode(e.target.result);
                $('#fileBase64').val(fileContent);
            };

            reader.readAsText(file);
        });


        $('#create-request-data').click(function () {
            let url = $('#request-url').val();

            let appId = $('#app-id').val();
            let serviceCode = $('#product option:selected').val();
            let requestJson = {
                "appId": appId,
                "serviceCode": serviceCode
            };

            let inputs = $('#data-container').find("input")
                .filter(':visible')
                .filter(function () {
                    return this.id != 'app-id';
                })
                .filter(function () {
                    return this.id != 'secret-key';
                });


            inputs.each(function (j) {
                if ($(this).attr("type") == 'text') {
                    // 添加 input 数据到请求 json 中
                    requestJson[$(this).attr('name')] = $(this).val();
                }
            });

            $('#request-data').val(JSON.stringify(requestJson));

            let secretKey = $('#secret-key').val();

            $.ajax({
                url: "http://101.40.86.116:31915/public/sign",
                type: 'post',
                data: "key=" + secretKey + serviceCode + "&data=" + JSON.stringify(requestJson),
                success: function (res) {
                    let signature = res.data;
                    $('#request-signature').val(signature);

                    let curl = "curl --location '" + url + "' \n" +
                        "--header 'Authorization: COMMON " + signature + "'\n" +
                        "--header 'Content-Type: application/json' \n" +
                        "--header 'appId: " + appId + "'\n" +
                        "--header 'serviceCode: " + serviceCode + "'\n" +
                        "--data '" + JSON.stringify(requestJson) + "'";

                    $('#request-curl').val(curl);
                },
                error: function (res) {
                    console.log('请求失败');
                    $("#request-signature").html(JSON.stringify(res));
                }
            });


        });
    });

    function hasKey(json, key) {
        return key in json || json.hasOwnProperty(key) || typeof (json[key]) !== "undefined";
    }


</script>
</body>
</html>